<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>账号管理</title>
</head>
<body>
<style>
    .dl-horizontal dt {
        width: 105px;
    }

    .dl-horizontal dd {
        margin-left: 115px;
    }
</style>
<div>
    <nav class="breadcrumb">
        <i class="Hui-iconfont">&#xe67f;</i> 首页
        <span class="c-gray en">&gt;</span> 系统管理
        <span class="c-gray en">&gt;</span> 账号管理
    </nav>
    <div class="page-container">
        <div id="merchantStaffManagementToolbar">
            <form class="form-inline">
                <div class="form-group">
                    <a href="javascript:;" onclick="merchantStaffStaffManagementFun.staffManagementdel()" class="btn btn-danger radius">
                        <i class="Hui-iconfont">&#xe6e2;</i> 批量离职
                    </a>
                    <a class="btn btn-primary radius" type="button" onclick="merchantStaffStaffManagementFun.staffManagement_click()" data-toggle="modal" data-target=".merchant-staff-manage-modal">
                        <i class="Hui-iconfont">&#xe600;</i> 员工入职
                    </a>
                </div>
            </form>
        </div>
        <div class="row">
            <div class="col-xs-12">
                <table id="staffTable" class="table table-bordered table-striped text-center">
                </table>
            </div>
        </div>

    </div>
</div>
<!--模态框-->

<div id="staffModal" class="modal fade merchant-staff-manage-modal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <form id="form-staffManage">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">办理入职</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label class="control-label">
                            账号：
                        </label>
                    </div>
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="" name="userName" id="staffUserNameSel">
                    </div>
                    <br/>
                    <div class="form-group">
                        <label class="control-label">
                            性别：
                        </label>
                    </div>
                    <div class="form-group">
                        <input type="radio" class="" placeholder="" name="sex" id="staffSexSel1" checked value="0">&nbsp;&nbsp;男&nbsp;&nbsp;&nbsp;&nbsp;
                        <input type="radio" class="" placeholder="" name="sex" id="staffSexSel2" value="1">&nbsp;&nbsp;女
                    </div>
                    <br/>
                    <div class="form-group">
                        <label class="control-label">
                            真实姓名：
                        </label>
                    </div>
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="" name="realName" id="staffRealNameSel">
                    </div>
                    <br/>
                    <div class="form-group">
                        <label class="control-label">
                            所属企业：
                        </label>
                    </div>
                    <div class="form-group">
                        <select class="form-control" name="subMchName" id="staffManagement-subMchName">
                            <option value="" selected='selected'>全部</option>
                        </select>
                    </div>
                </div>
                <div class="modal-footer">
                    <button onclick="merchantStaffStaffManagementFun.staffManagementAdd()" type="button" class="btn btn-primary">保存</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                </div>
            </div>
        </form>
    </div>
</div>

<!--<div id="staffModal" class="modal fade merchant-staff-manage-modal" tabindex="-1" role="dialog">-->
    <!--<div class="modal-dialog" role="document">-->
        <!--<form id="form-staffManage">-->
        <!--<div class="modal-content">-->
            <!--<div class="modal-header">-->
                <!--<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>-->
                <!--<h4 class="modal-title">办理入职</h4>-->
            <!--</div>-->
            <!--<div class="modal-body">-->
                <!--<form class="form-inline">-->
                    <!--<div class="form-group">-->
                        <!--<label class="control-label" title="姓名">-->
                            <!--姓名：-->
                        <!--</label>-->
                        <!--<input type="text" class="form-control" placeholder="" name="realName" id="staffRealNameSel">-->
                    <!--</div>-->
                <!--</form>-->
                <!--<div style="padding: 25px">-->
                    <!--<div class="panel panel-default  mt-20">-->
                        <!--<div class="panel-heading">员工信息</div>-->
                        <!--<div class="panel-body">-->
                            <!--<div class="media">-->
                                <!--<div class="media-left">-->
                                    <!--<a href="javascript:;">-->
                                        <!--<img style="width: 150px;" class="media-object img-rounded" src="../../../static/RT/img/wash2.jpg" alt="员工照片" th:src="@{/static/RT/img/wash2.jpg}">-->
                                    <!--</a>-->
                                <!--</div>-->
                                <!--<div class="media-body">-->
                                    <!--&lt;!&ndash;<h4 class="media-heading">个人信息展示</h4>&ndash;&gt;-->
                                    <!--<div>-->
                                        <!--<dl class="dl-horizontal">-->
                                            <!--<dt>姓&nbsp;&nbsp;&nbsp;&nbsp;名 ：</dt>-->
                                            <!--<dd id="staffRealName"></dd>-->
                                            <!--<dt>性&nbsp;&nbsp;&nbsp;&nbsp;别 ：</dt>-->
                                            <!--<dd id="staffSex"></dd>-->
                                            <!--<dt>账&nbsp;&nbsp;&nbsp;&nbsp;号 ：</dt>-->
                                            <!--<dd id="staffUserName"></dd>-->
                                            <!--<dt>身份证号 ：</dt>-->
                                            <!--<dd id="staffIdCard"></dd>-->
                                            <!--<dt>创建时间 ：</dt>-->
                                            <!--<dd id="staffAddTime"></dd>-->
                                        <!--</dl>-->
                                    <!--</div>-->
                                <!--</div>-->
                            <!--</div>-->

                        <!--</div>-->
                    <!--</div>-->
                <!--</div>-->

                <!--&lt;!&ndash;<form class="form-inline">&ndash;&gt;-->
                    <!--&lt;!&ndash;<div class="form-group">&ndash;&gt;-->
                        <!--&lt;!&ndash;<label class="control-label" title="店名">&ndash;&gt;-->
                            <!--&lt;!&ndash;门店分配：&ndash;&gt;-->
                        <!--&lt;!&ndash;</label>&ndash;&gt;-->
                        <!--&lt;!&ndash;<input type="text" class="form-control" placeholder="" name="shopsName" id="shopsName">&ndash;&gt;-->
                    <!--&lt;!&ndash;</div>&ndash;&gt;-->
                <!--&lt;!&ndash;</form>&ndash;&gt;-->
                <!--<form class="form-inline">-->
                    <!--<div class="form-group">-->
                        <!--<label class="control-label" title="姓名">-->
                            <!--角色分配：-->
                        <!--</label>-->
                        <!--<input type="text" class="form-control" placeholder="" name="staffRole" id="staffRole">-->
                    <!--</div>-->
                <!--</form>-->
            <!--</div>-->
            <!--<div class="modal-footer">-->
                <!--<button onclick="merchantStaffStaffManagementFun.staffManagementAdd()" type="button" class="btn btn-primary">保存</button>-->
                <!--<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>-->
            <!--</div>-->
        <!--</div>-->
        <!--</form>-->
    <!--</div>-->
<!--</div>-->
<script type="text/javascript">
    //员工管理
    var merchantStaffStaffManagementFun = {
        init: function () {
            let _this = this;
            _this.bootstrapvalidatorForm();

            _this.initBizShop();

            //商户管理展示所有
            $('#staffTable').bootstrapTable({
                url: 'user/staff/list',         //请求后台的URL（*）
                method: 'get',
                toolbar: '#merchantStaffManagementToolbar',                //工具按钮用哪个容器
                striped: true,                      //是否显示行间隔色
                cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
                pagination: true,                   //是否显示分页（*）
                sortable: false,                     //是否启用排序
                sortOrder: "asc",                   //排序方式
                sidePagination: "client",           //分页方式：client客户端分页，server服务端分页（*）
                pageNumber: 1,                       //初始化加载第一页，默认第一页
                pageSize: 10,                       //每页的记录行数（*）
                pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
                //search: true,                       //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
                strictSearch: true,
                showColumns: true,                  //是否显示所有的列
                showRefresh: true,                  //是否显示刷新按钮
                minimumCountColumns: 2,             //最少允许的列数
                clickToSelect: true,                //是否启用点击选中行
                // height: 500,                        //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
                uniqueId: "ID",                     //每一行的唯一标识，一般为主键列
                showToggle: true,                    //是否显示详细视图和列表视图的切换按钮
                cardView: false,                    //是否显示详细视图
                detailView: false,                   //是否显示父子表
                columns: [
                    {
                        checkbox: true
                    }, {
                        field: 'userId',
                        title: '角色id',
                        visible: false
                    }, {
                        field: 'userName',
                        title: '账号'
                    }, {
                        field: 'sex',
                        title: '性别',
                        formatter: function (value, row, index) {
                            if (value == '0') {
                                return '女';
                            } else if (value == '1') {
                                return '男';
                            } else {
                                return '未知';
                            }
                        }
                    }, {
                        field: 'realName',
                        title: '真实姓名'
                    }, {
                        field: 'subMchName',
                        title: '所属企业',
                        formatter: function (value, row, index) {
                            if (value == null) {
                                return '全部';
                            } else {
                                return value;
                            }
                        }
                    }, {
                        field: 'addTime',
                        title: '创建时间'
                    }, {
                        field: 'state',
                        title: '状态',
                        formatter: function (value, row, index) {
                            if (value == '1') {
                                return '在职';
                            } else if (value == '0') {
                                return '离职';
                            } else if (value == '2') {
                                return '禁用';
                            }
                        }
                    }, {
                        field: 'address',
                        title: '操作',
                        formatter: function (value, row, index) {
                            return `
                           <a class="btn btn-danger btn-sm" type="button"
                           onclick="merchantStaffStaffManagementFun.staffManagement_close_array('${row.userId}','${row.state}')">禁用</a>
                           <a class="btn btn-success btn-sm" type="button"
                           onclick="merchantStaffStaffManagementFun.staffManagement_open_array('${row.userId}','${row.state}')">启用</a>
                           <a class="btn btn-default btn-sm" type="button"
                          onclick="merchantStaffStaffManagementFun.staffManagement_del_array('${row.userId}')">离职</a>
                    `;
                        }
                    }
                ]
            });

            //绑定姓名的选择事件，点击姓名切换员工信息
//            $("#staffRealNameSel").on("change", function (e) {
//                var userId = $("#staffRealNameSel").val()
//                $.ajax({
//                    type: "GET",
//                    url: "user/getBizUserByBizId",
//                    dataType: "json",
//                    data: {userId: userId},
//                    success: function (data) {
//                        $("#staffRealName").text(data.realName);
//                        $("#staffUserName").text(data.userName);
//                        $("#staffIdCard").text(data.idCard);
//                        $("#staffAddTime").text(data.addTime);
//                        var sex;
//                        //性别判断
//                        if (data.sex == '0') {
//                            sex = '女';
//                        } else if (data.sex == '1') {
//                            sex = '男';
//                        } else {
//                            sex = '未知';
//                        }
//                        $("#staffSex").text(sex);
//                    },
//                    error: function () {
//                        alert("error");
//                    }
//                });
//            })

            //控制select2，在模态框中仍然可以手动输入
//            $.fn.modal.Constructor.prototype.enforceFocus = function () {
//            };
        },
        //添加员工，点击事件
        staffManagement_click: function () {
            //先清空数据
            $("#staffUserNameSel").val('');
            $("#staffRealNameSel").val('');
            $("#staffManagement-subMchName option:first").prop("selected", 'selected');
            $("input[type='radio']").eq(0).prop("checked",true);

            //重置validator
            $("#form-staffManage").data('bootstrapValidator').resetForm();

        },
        //将用户添加到商户
        staffManagementAdd: function () {
            let _this = this;
            //bootstrap验证
            var bootstrapValidator = $("#form-staffManage").data('bootstrapValidator');
            bootstrapValidator.validate();
            if(bootstrapValidator.isValid())
                $("#form-staffManage").submit();
            else return;

//            var userId = $("#staffRealNameSel").select2('val');
            var realName = $("#staffRealNameSel").val();
            var userName = $("#staffUserNameSel").val();
            var subMchName = $('#staffManagement-subMchName').val();
            var sex = $('input:radio:checked').val();
//            var roleId = $("#staffRole").select2('val');
//            var shopId = $("#shopsName").select2('val');
            //修改biz_id字段

            $.ajax({
                type: "POST",
                url: "user/addStaffs",
                data: {realName: realName, userName: userName, id: subMchName,sex: sex},
//                data: {userId: userId, roleId: roleId},
                dataType: "json",
                success: function (data) {
                    if (data.state) {
                        layer.msg("入职成功！", {icon: 1});
                        //涮新table，关闭窗体
                        _this.refreshTable();
                        $('#staffModal').modal('hide')

                        return true;
                    } else {
                        layer.msg("添加失败！", {icon: 2});
                        return false;
                    }

                },
                error: function () {
                    alert("error");
                }
            });
        },
        //批量解除所属商户下的用户
        staffManagementdel: function () {
            let _this = this;
            layer.confirm('确认要删除吗？',
                {
                    btn: ['确定', '取消']
                },
                function () {
                    //确认删除
                    //获取所有被选中的记录
                    var rows = $("#staffTable").bootstrapTable('getSelections');
                    if (rows.length == 0) {
                        layer.alert("请先选择要删除的记录!");
                        return;
                    }
                    var ids = '';
                    for (var i = 0; i < rows.length; i++) {
                        ids += rows[i]['userId'] + ",";
                    }
                    ids = ids.substring(0, ids.length - 1);

                    //删除
                    $.ajax({
                        type: "get",
                        url: "user/updateMoreBiz",
                        data: {listId: ids},
                        dataType: "json",
                        success: function (data) {
                            if (data.state) {
                                layer.msg("员工批量离职成功！", {icon: 1});
                                //涮新table
                                _this.refreshTable();

                                return true;
                            } else {
                                layer.msg("批量删除失败！", {icon: 2});
                                return false;
                            }

                        },
                        error: function () {
                            alert("error");
                        }
                    });

                },
                function () {
                    layer.msg('已取消！', {icon: 1});
                    return false;
                }
            );
        },
        //涮新table
        refreshTable: function () {
            $("#staffTable").bootstrapTable('refresh');
        },
        //启用某个用户
        staffManagement_open_array: function (index, state) {
            let _this = this;
            //判断该用户是否已经处于启用
            if (state == 1) {
                layer.msg("该员工已经处于启用状态！", {icon: 0});
                return;
            }
            $.ajax({
                type: "get",
                url: "user/openBiz",
                data: {userId: index},
                dataType: "json",
                success: function (data) {
                    //state为true，启用成功
                    if (data.state) {
                        layer.msg("已启用！", {icon: 1});

                        //涮新table
                        _this.refreshTable();

                        return true;
                    } else {
                        layer.msg("启用失败！", {icon: 2});
                        return false;
                    }
                },
                error: function () {
                    layer.msg('错误！', {icon: 2});
                    return false;
                }
            });
        },
        //禁用某个用户
        staffManagement_close_array: function (index, state) {
            let _this = this;
            //判断该用户是否已经处于禁用
            if (state == 2) {
                layer.msg("该员工已经处于禁用状态！", {icon: 0});
                return;
            }
            //禁用
            $.ajax({
                type: "get",
                url: "user/closeBiz",
                data: {userId: index},
                dataType: "json",
                success: function (data) {
                    //state为true，禁用成功
                    if (data.state) {
                        layer.msg("已禁用！", {icon: 1});

                        //涮新table
                        _this.refreshTable();

                        return true;
                    } else {
                        layer.msg("禁用失败！", {icon: 2});
                        return false;
                    }
                },
                error: function () {
                    layer.msg('错误！', {icon: 2});
                    return false;
                }
            });
        },
        //单个解除所属商户下的用户
        staffManagement_del_array: function (index) {
            let _this = this;
            layer.confirm('确认要离职吗？',
                {
                    btn: ['确定', '取消']
                },
                function () {
                    //确认删除
                    $.ajax({
                        type: "get",
                        url: "user/updateBiz",
                        data: {userId: index},
                        dataType: "json",
                        success: function (data) {
                            //state为true，删除成功
                            if (data.state) {
                                layer.msg("员工离职成功！", {icon: 1});

                                //涮新table
                                _this.refreshTable();

                                return true;
                            } else {
                                layer.msg("离职失败！", {icon: 2});
                                return false;
                            }
                        },
                        error: function () {
                            layer.msg('错误！', {icon: 2});
                            return false;
                        }
                    });

                },
                function () {
                    layer.msg('已取消！', {icon: 1});
                    return false;
                }
            );
        },
        initBizShop: function () {
            //加载门店名称
            $.ajax({
                type: "GET",
                url: "biz/getWxBizShopMchDtoList",
                dataType: "json",
                success: function (data) {
                    for(var i = 0;i<data.data.length;i++){
                        $("#staffManagement-subMchName").append("<option value='"+data.data[i].id+"'>"+data.data[i].text+"</option>");
                    }
                },
                error: function () {
                    alert("error");
                }
            });
        },
        //bootstrap验证
        bootstrapvalidatorForm: function () {
            $('#form-staffManage').bootstrapValidator({
                message: 'This value is not valid',
                excluded : [':disabled'],
                feedbackIcons: {
                    valid: 'glyphicon glyphicon-ok',
                    invalid: 'glyphicon glyphicon-remove',
                    validating: 'glyphicon glyphicon-refresh'
                },
                fields: {
                    realName: {
                        validators: {
                            notEmpty: {
                                message: '真实姓名不能为空'
                            }
                        }
                    },
                    userName: {
                        validators: {
                            notEmpty: {
                                message: '账号不能为空'
                            }
                        }
                    }
                }
            });
        }
    };

    merchantStaffStaffManagementFun.init();
</script>
</body>
</html>